import React from 'react'
import { Wrapper } from './style'
import { video } from '@/models/videoType'
import classnames from 'classnames'

interface VideoProps {
    videoData: video,
    videoIndex:number
    changeRecommendVideoIsFavoritesDispatch:(index:number)=>void
}

const VideoItem: React.FC<VideoProps> = (props) => {
    const {title,baseInfo,author}=props.videoData
    const {videoIndex,changeRecommendVideoIsFavoritesDispatch}=props
    return (
        <Wrapper>
            <div className="video_author_wrapper">
                <div className="author_avatar">
                    <img className='img_avatar' src={author.avatar} alt="" />
                </div>
                <div className="author_name">{author.name}</div>
            </div>
            <div className="video_content_wrapper" >
                <div className="video_cover">
                    <img className='img_cover' src={baseInfo.cover} alt="" />
                    <div className="video_action_wrapper">
                        <div className="action_desc">{baseInfo.followDesc}</div>
                        <div className="action_button">开始训练</div>
                    </div>
                </div>
            </div>
            <div className="video_desc_wrapper">
                <div className="desc_left">
                    <div className="title">{title}</div>
                    <div className="desc">{baseInfo.desc}</div>
                </div>
                <div className="desc_icon_favorite" 
                    onClick={()=>changeRecommendVideoIsFavoritesDispatch(videoIndex)}
                >
                    <div className="icon_favorite">
                        <i className={classnames('iconfont','icon-aixin',
                                    {favorites:baseInfo.favorites==true})}
                        ></i>
                    </div>
                    <div className="icon_state">{baseInfo.favorites?'已收藏':'收藏'}</div>
                </div>
            </div>
        </Wrapper>
    )
}

export default VideoItem
